<template>
    <div id="MemberList">
        <div class="breadcrumb ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <el-tag>采购信息管理</el-tag>
            </el-breadcrumb-item>
             <el-breadcrumb-item>
                <el-tag>采购列表</el-tag>
              </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="table">
             <el-table
                :data="tableData.filter(data => !search || data.bianhao.includes(search))"
                borde
                style="width: 100%"
                height="550">
                <el-table-column
                  label="采购id"
                  prop="id"
                  width="80">
                </el-table-column>

                <el-table-column
                  label="订单编号"
                  prop="bianhao"
                  width="150">
                </el-table-column>
  
                <el-table-column
                  label="采购清单"
                  width="80"
                >
                   <template slot-scope="scope">
                      <router-link :to="{path:'/index/orderList/orderDetail',query:{bianhao:scope.row.bianhao,type:1}}">查看</router-link>
                   </template>
                </el-table-column>

                <el-table-column
                  label="可获积分"
                  prop="jifen"
                  width="80">
                </el-table-column>

                <el-table-column
                  label="发布时间"
                  prop="time"
                  width='200'>
                </el-table-column>
                <el-table-column
                  label="状态"
                  prop="status"
                  width="100">
                </el-table-column>


                <el-table-column
                  align="right"
                  width='330'>
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入订单号搜索"/>
                  </template>

                  <template slot-scope="scope">
                     <span style="margin-right:0.1rem;" v-if="scope.row.status==='审核中'">
                      <el-button      
                        size="mini"
                        @click="handleEnable(scope.row.id,scope.row.bianhao)">审核通过</el-button>
                       <el-button 
                        size="mini"
                        @click="handleDisable(scope.row.id,scope.row.bianhao)">审核不通过</el-button>
                      </span>
                  
                      <el-button
                      size="mini"
                      type="danger"
                      @click="handleDel(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
        </div>

        <router-view></router-view>
    </div>

</template>
<script>
    import { getCaigou,orderEnable,orderDisable,orderDel } from './../../../service/api/index.js'
     export default{
       name:"GoodsList",
            data() {
              return {
                  tableData: [],
                     search: ''
              }
            },
            
           
            
          
   
            mounted(){
               
            },
            


            created(){
         
                      getCaigou().then((response)=>{
                       console.log(response);
                      if (response.success) {
                          this.tableData = response.data;
                            for (var i=0;i<(this.tableData).length;i++) {
                               if (this.tableData[i].status===-1) {
                                    this.tableData[i].status='待接单';
                               }else if(this.tableData[i].status===0){
                                     this.tableData[i].status='审核中';
                               }else if (this.tableData[i].status===1) {
                                    this.tableData[i].status='派送中';
                               }else if (this.tableData[i].status===2) {
                                    this.tableData[i].status='审核不通过';
                               }else if (this.tableData[i].status===3) {
                                     this.tableData[i].status="已完成";
                               };

                        }
                       }
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch
            }, // ----created

            methods:{
                //审核通过
                 async handleEnable(id,bianhao){
                       console.log(bianhao);
                      let res = await orderEnable(id,bianhao);
                      //console.log(res);
                      //改变订单表的订单状态 
                      if (res.status===200) {
                           window.location.reload();
                      } 
                  },

                // 审核不通过
                 async handleDisable(id,bianhao){
                     let res = await orderDisable(id,bianhao);
                     if (res.status===200) {
                          window.location.reload();
                     }
                 },
                 async handleDel(id){
                    let res = await orderDel(id);
                    console.log(res);
                       if (res.status===200) {
                            this.$message({
                              message: '删除采购订单成功',
                              type: 'success'
                            });
                          window.location.reload();
                     }
                 }
            }
     }
    
</script>
<style lang="less" scope>
   #MemberList{
     position:relative;
     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }

    .breadcrumb {
     margin-right: 0.2rem;
     margin-left: 0.2rem;
     margin-top: 0.1rem;
     margin-bottom: 0.1rem;
     background-color:white;
     padding: 0.06rem;
     height:0.6rem;
     border-radius: 4px
   }
    
    .list{
      margin-left: 2rem;
      margin-right: 2rem;
   }
</style>